@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/info_edit.css')}}">
<style type="text/css">
.details_title{
    width:200px;
}
.el-input__prefix, .el-input__suffix {
    top: 6px;
}
</style>
@section('content')
<div class="mainHrContent" id="hrInfodetails">
    <div class="storelistTitle" id="storelistTitle"  v-cloak>
        <span class="storelistTitle_left">
            <span>

                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 基础信息

            </span>
        </span>
        <!-- <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span> -->
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrInfodetailss"  v-cloak>
            <div class="basicInfo_title">
                <span></span>
                基础信息
            </div>
            <div class="userDetails" style="padding-left:80px;">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <!-- <p style="align-items: flex-start;">
                        <span class="details_title"><i class="must_input">* </i>头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：</span>
                        <el-upload class="avatar-uploader" name="image"
                                   :action="uploadImgUrl"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="form.avatar" :src="form.avatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </p> -->
                    <el-form-item prop="company_name">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>公司名称：</span>
                        <el-input v-model="form.company_name" placeholder="请输入营业执照上的公司名称"></el-input>
                    </p>
                    </el-form-item>
                    <el-form-item prop="bank_name">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>开户行：</span>
                        <el-input v-model="form.bank_name"></el-input>
                    </p>
                    </el-form-item>
                    <el-form-item prop="bank_sn">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>银行账号：</span>
                        <el-input v-model="form.bank_sn"></el-input>
                    </p>
                    </el-form-item>
                    <el-form-item prop="company_email">
                        <p>
                            <span class="details_title"><i class="must_input">* </i>公司邮箱：</span>
                            <el-input v-model="form.company_email"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="master_name">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>联系人姓名：</span>
                        <el-input v-model="form.master_name"></el-input>
                    </p>
                    </el-form-item>
                    <el-form-item prop="sex">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
                        <el-radio-group size="mini" v-model="form.sex">
                            <el-radio :label="1" border>男</el-radio>
                            <el-radio :label="2" border>女</el-radio>
                        </el-radio-group>
                    </p>
                    </el-form-item>
                    <!-- <el-form-item prop="master_phone"> -->
                        <!-- <p>
                            <span class="details_title"><i class="must_input">* </i>手机号码：</span>
                            <el-input v-model="form.master_phone"></el-input>
                        </p> -->
                        <p>
                            <span class="details_title"><i class="must_input">* </i>手机号码：</span>
                            @{{form.mobile}}<a href="{{route('home.suppliermy.supplierSafePhone') }}">修改</a>
                        </p>
                    <!-- </el-form-item> -->
                    <el-form-item prop="qq">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>QQ号码：</span>
                        <el-input v-model="form.qq"></el-input>
                    </p>
                    </el-form-item>
                    <el-form-item prop="wechat">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>微信号码：</span>
                        <el-input v-model="form.wechat"></el-input>
                    </p>
                    </el-form-item>
                    <el-form-item prop="area">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>所在区域：</span>
                        <!-- <el-input v-model="form.area"></el-input> -->
                        <el-select v-model="form.area" placeholder="请选择">
                            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    </el-form-item>
                    <el-form-item prop="license">
                    <p style="align-items: flex-start;">
                        <span class="details_title"><i class="must_input">* </i>营业执照：</span>
                        <el-upload class="avatar-uploader" name="image"
                                   :action="uploadImgUrl"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess1"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="form.license" :src="form.license" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </p>
                    <p style="margin-left: 240px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">上传图片大小不能超过2MB!</p>
                    </el-form-item>
                    <el-form-item prop="qrganization_code">
                    <p>
                        <span class="details_title"><i class="must_input">* </i>营业执照组织机构代码：</span>
                        <el-input v-model="form.qrganization_code"></el-input>
                    </p>
                    </el-form-item>
                    <p style="align-items: flex-start;">
                        <div style="display:flex;align-items: flex-start;">
                            <span class="details_title">资格证书：</span>
                            <div class="img_box" v-if="qualification.length" style="display:flex;">
                                <div class="i_box" v-for="(item,index) in qualification" :key="index" style="position: relative;">
                                    <img style="border-radius:2px;margin-right:5px;"  :src="item" class="avatar">
                                    <div style="position: absolute;top:-8px;right:0px;width:18px;height:18px;display:flex;cursor: pointer;
                                    justify-content: center;align-items: center;background:#000000;color:white;border-radius:50%;font-size:12px" @click="delImg(index)">X</div>
                                </div>
                            </div>
                            <el-upload class="avatar-uploader" name="image"
                                    :action="uploadImgUrl"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess2"
                                    :before-upload="beforeAvatarUpload">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </p>
                    <!-- <p>
                        <span class="details_title">公司类型：</span>
                        <el-select v-model="form.company_type_id" filterable clearable size="mini">
                            <el-option v-for="item in companyTypeData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    <p>
                        <span class="details_title">公司行业：</span>
                        <el-select v-model="form.company_industry_id" filterable clearable size="mini">
                            <el-option v-for="item in companyIndustryData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    <p>
                        <span class="details_title">员工人数：</span>
                        <el-select v-model="form.company_size_id" filterable clearable size="mini">
                            <el-option v-for="item in companyEmployeesData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p> -->
                </el-form>
                <button @click="submitForm('ruleForm')" v-if="store_id">保存</button>
                <button @click="submitForm('ruleForm')" v-else style="width:130px">保存并创建店铺</button>
                <!-- <button @click="goOrder" style="display:inline-block;left:340px">创建店铺</button> -->
            </div>
        </div>
    </div>
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrInfodetails = new Vue({
            el: '#hrInfodetailss',
            data: () => {
                return {
                    imageUrl: '',
                    uploadUrl: UPLOAD_FILE,
                    uploadImgUrl: UPLOAD_IMG,
                    avatar: '',
                    license:'',
                    qualification:[],
                    store_id:'',
                    form: {
                        avatar: '',
                        sex:'1',
                        qq:'',
                        company_name: '',
                        master_name:'',
                        company_email:"",
                        wechat:'',
                        license:'',
                        qualification:[],
                        qrganization_code:'',
                        mobile:'',
                        area:'',
                        bank_name:'',
                        bank_sn:''
                    },
                    rules: {
                        company_email: [{
                            required: true,
                            validator: validateEmail,
                            trigger: 'blur'
                        }],
                        master_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        bank_sn: [{
                            required: true,
                            message: '请输入银行账号',
                            trigger: 'blur'
                        }],
                        bank_name: [{
                            required: true,
                            message: '请输入开户行名称',
                            trigger: 'blur'
                        }],
                        company_name: [{
                            required: true,
                            message: '请输入公司名称',
                            trigger: 'blur'
                        }],
                        qq: [{
                            required: true,
                            message: '请输入qq号码',
                            trigger: 'blur'
                        }],
                        wechat: [{
                            required: true,
                            message: '请输入微信号码',
                            trigger: 'blur'
                        }],
                        master_name: [{
                            required: true,
                            message: '请输入联系人姓名',
                            trigger: 'blur'
                        }],
                        area: [{
                            required: true,
                            message: '请选择所在区域',
                            trigger: 'blur'
                        }],
                        qrganization_code: [{
                            required: true,
                            message: '请输入营业执照组织机构代码',
                            trigger: 'blur'
                        }],
                        license: [{
                            required: true,
                            message: '请上传营业执照',
                            trigger: 'blur'
                        }],
                    },
                    companyTypeData: [],
                    companyIndustryData: [],
                    companyEmployeesData: [],
                    HREmployeesData: [],
                    areaData:[]
                }
            },
            created() {
                let data = {}
                this.store_id = JSON.parse(sessionStorage.getItem("HRuserDetails")).store_id
                apiAjax("{{ route('home.user.userBasicInfoApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.form = res.data;
                        this.avatar = this.form.avatar;
                        this.license = res.data.license;
                        this.store_id = res.data.store_id;
                        this.qualification = res.data.qualification;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                    apiAjax("{{ route('home.public.areas')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.areaData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                //公司类型
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 1
                }, (res) => {
                    this.companyTypeData = res.data;
                });
                //公司行业
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 2
                }, (res) => {
                    this.companyIndustryData = res.data;
                });
                //公司规模（员工人数）
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 3
                }, (res) => {
                    this.companyEmployeesData = res.data;
                });
            },
            mounted() {},
            methods: {
                delImg(index){
                    this.qualification.splice(index,1)
                },
                goOrder(){
                    window.location.href = "{{route('home.suppliermy.supplierStore')}}"
                },
                handleAvatarSuccess1(res, file) {
                    this.form.license = URL.createObjectURL(file.raw);
                    this.license = file.response.data.path
                },
                handleAvatarSuccess2(res, file) {
                    // this.form.qualification.push(URL.createObjectURL(file.raw));
                    if(this.qualification.length > 2) return this.$message.error('最多只能上传三张');
                    this.qualification.push(file.response.data.path)
                },
                handleAvatarSuccess(res, file) {
                    this.form.avatar = URL.createObjectURL(file.raw);
                    this.avatar = file.response.data.path
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                // avatar: this.avatar,
                                company_name: this.form.company_name,
                                company_email: this.form.company_email,
                                master_name: this.form.master_name,
                                bank_name: this.form.bank_name,
                                bank_sn: this.form.bank_sn,
                                // company_phone: this.form.company_phone,
                                sex: this.form.sex,
                                qq: this.form.qq,
                                wechat: this.form.wechat,
                                area: this.form.area,
                                license: this.license,
                                qrganization_code: this.form.qrganization_code,
                                qualification: this.qualification
                            };
                            apiAjax("{{ route('home.user.userBasicInfoEditApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: "保存成功",
                                        type: 'success'
                                    });
                                    sessionStorage.setItem("HRuserDetails", JSON.stringify(res.data))
                                if(this.store_id){
                                    window.location.href = "{{ route('home.suppliermy.supplierInfo') }}";
                                }else {
                                    window.location.href = "{{route('home.suppliermy.supplierStore')}}"
                                }
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection